﻿<%@ Page Title="" Language="C#" MasterPageFile="MasterPage.master" AutoEventWireup="true" CodeFile="User.aspx.cs" Inherits="index" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <style>
        .ChartTest {width: 100%;}
        .container {width: 100%;}
        .container-fluid {margin-top: 20px;}
        @media (max-width: 768px) {
            .container-fluid {
                margin-top: 120px;
                padding-top: 20px;
            }
            #page-wrapper {
                border-top-left-radius: 0px;
                border-bottom-left-radius: 0px;
            }
        }
        .yearlist {
            display:inline-block;
            width:10%;
        }
        .fontcolor {
            color:#888;

        }
        .table-con {
            margin-left:40px;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <!-- Start/#page-wrapper ------------------------------------------------------------------------------------------------------------>        
        
            <!-- Start/.container-fluid -->
            <div class="container-fluid fontcolor" >
                <!-- Page Heading -->
                <!--會員註冊日期分析條件-->
                <div class="col-lg-4 ChartTest">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title"><i class="fa fa-file-text fa-fw"></i>註冊人數圖表條件</h3>
                        </div>
                        <div class="panel-body">
                            <div class="table-responsive table-con">
                            <!--內容--------------------------------------->
                                  起始年份:<select id="SelectCreatRegisterChartStartYear" class="form-control yearlist">
                                </select>
                                結束年份:<select id="SelectCreatRegisterChartEndYear" class="form-control yearlist">
                                </select>
                                圖表類型:<select id="RegisterChartType" class="form-control yearlist">
                                    <option value="0">長條圖</option>
                                    <option value="1">折線圖</option>
                                </select>
                                <input id="ButtonCreatRegisterChart" type="button" value="產生圖表" class="btn btn-success"/>
                            <!--內容------------------------------------>
                            </div>
                            <div class="text-right">
                                <a href="#">top<i class="fa fa-arrow-circle-up"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
                <!--會員年齡分析條件-->
                <div class="col-lg-4 ChartTest">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title "><i class="fa fa-file-text fa-fw"></i>會員年齡圖表條件</h3>
                        </div>
                        <div class="panel-body">
                            <div class="table-responsive table-con">
                            <!--內容--------------------------------------->
                                  起始年份:<select id="SelectCreatAgeChartStartYear" class="form-control yearlist">
                                </select>
                                結束年份:<select id="SelectCreatAgeChartEndYear" class="form-control yearlist">
                                </select>
                                年齡間隔:<select id="SelectCreatAgeChartAgeInterval" class="form-control yearlist">
                                    <option>5</option>
                                    <option selected="selected">10</option>
                                    <option>15</option>
                                    <option>20</option>
                                </select>
                                <input id="ButtonCreatAgeChart" type="button" value="產生圖表" class="btn btn-success"/>
                            <!--內容------------------------------------>
                            </div>
                            <div class="text-right">
                                <a href="#">top<i class="fa fa-arrow-circle-up"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
                <input type="hidden" id="ContentHr"/>
            </div>


     <script>
            $(function () {
                ChartNum = 1;/*圖表Div數*/
                /*Left選單滑鼠改成手式*/
                $(".glyphicon").mouseenter(function () {
                    $(this).css("cursor", "pointer");
                });
/*Register=========================================================*/
                /*Register起始與結束選單初始化*/
                $.ajax({
                    url: "Handler/PeopleAnalysis.ashx"
                    , type: "post"
                    , data: "type=2"
                    , success: function (data) {
                        $.each(data, function (name, value) {
                            $.each(value, function () {
                                var SelectOption = CreateYearSelectOption(this.StartYear, this.EndYear);
                                $("#SelectCreatRegisterChartStartYear").html(SelectOption);
                                SelectOption = CreateYearSelectOption($("#SelectCreatRegisterChartStartYear").find(":selected").text(), this.EndYear);
                                $("#SelectCreatRegisterChartEndYear").html(SelectOption);
                            });
                        });
                    }
                });
                /*Register圖表產生*/
                $("#ButtonCreatRegisterChart").click(function () {　
                    ChartTitle = "會員註冊分析圖表";
                    switch ($("#RegisterChartType").val())
                    {
                        case '0':
                            CreateChartDiv(ChartNum,ChartTitle);
                            CreateRegisterChart(
                                ChartNum,
                                $("#SelectCreatRegisterChartStartYear").find(":selected").text(),
                                $("#SelectCreatRegisterChartEndYear").find(":selected").text()
                                );
                            ChartNum++;
                            break;
                        case '1':
                            CreateChartDiv(ChartNum, ChartTitle);
                            CreateRegisterChart2(
                                ChartNum,
                                $("#SelectCreatRegisterChartStartYear").find(":selected").text(),
                                $("#SelectCreatRegisterChartEndYear").find(":selected").text()
                                );
                            ChartNum++;
                            break;
                    }
                });
                /*改SelectCreatRegisterChartEndYear選單*/
                $("#SelectCreatRegisterChartStartYear").change(function () {
                    $.ajax({
                        url: "Handler/PeopleAnalysis.ashx"
                        , type: "post"
                        , data: "type=2"
                        , success: function (data) {
                            $.each(data, function (name, value) {
                                $.each(value, function () {
                                    /*Ajax裡this已不是#SelectCreatRegisterChartStartYear*/
                                    var SelectOption = CreatYearSelectOption($("#SelectCreatRegisterChartStartYear").find(":selected").text(), this.EndYear);
                                    $("#SelectCreatRegisterChartEndYear").html(SelectOption);
                            });
                        });
                    }
                    });
                });
/*Age=========================================================*/
                /*Age起始與結束選單初始化*/
                $.ajax({
                    url: "Handler/PeopleAnalysis.ashx"
                    , type: "post"
                    , data: "type=2"
                    , success: function (data) {
                        $.each(data, function (name, value) {
                            $.each(value, function () {
                                var SelectOption = CreateYearSelectOption(this.StartYear, this.EndYear);
                                $("#SelectCreatAgeChartStartYear").html(SelectOption);
                                SelectOption = CreateYearSelectOption($("#SelectCreatAgeChartStartYear").find(":selected").text(), this.EndYear);
                                $("#SelectCreatAgeChartEndYear").html(SelectOption);
                            });
                        });
                    }
                });
                /*改SelectCreatAgeChartEndYear選單*/
                $("#SelectCreatAgeChartStartYear").change(function () {
                    $.ajax({
                        url: "Handler/PeopleAnalysis.ashx"
                        , type: "post"
                        , data: "type=2"
                        , success: function (data) {
                            $.each(data, function (name, value) {
                                $.each(value, function () {
                                    var SelectOption = CreateYearSelectOption($("#SelectCreatAgeChartStartYear").find(":selected").text(), this.EndYear);
                                    $("#SelectCreatAgeChartEndYear").html(SelectOption);
                                });
                            });
                        }
                    });
                });
                /*Age圖表產生*/
                $("#ButtonCreatAgeChart").click(function () {
                    ChartTitle = "會員年齡分析圖表";
                    
                    CreateChartDiv(ChartNum, ChartTitle);
                    CreateAgeChart(
                        ChartNum,
                        $("#SelectCreatAgeChartStartYear").find(":selected").text(),
                        $("#SelectCreatAgeChartEndYear").find(":selected").text(),
                        $("#SelectCreatAgeChartAgeInterval").find(":selected").text()
                        );
                    ChartNum++;
                });
            })
/*圖表共用=========================================================*/
            /*創造裝載圖表框*/
            function CreateChartDiv(ChartNum, ChartTitle) {
                Content = "<div class='col-lg-4 ChartTest'>";
                Content += "<div class='panel panel-default'>";
                Content += "<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>";
                Content += "<div class='panel-heading'>";
                Content += "<h3 class='panel-title'><i class='fa fa-file-text fa-fw'></i>" + ChartTitle + "</h3>";
                Content += "</div>";
                Content += "<div class='panel-body'>";
                Content += "<div class='table-responsive container' id='container" + ChartNum + "'>";
                Content += "</div>";
                Content += "<div class='text-right'>";
                Content += "<a href='#'>top<i class='fa fa-arrow-circle-right'></i></a>";
                Content += "</div>";
                Content += "</div>";
                Content += "</div>";
                Content += "</div>";
                $("#ContentHr").after(Content);
            }
            /*創造年選單*/
            function CreateYearSelectOption(StartNum, EndNum) {
                var content = "";
                var j = 0;
                var num1 = parseInt(StartNum);
                var num2 = parseInt(EndNum);
                for (var i = num2 ; i >= num1 ; i--) {
                    content += "<option value='" + j + "'>" + i + "</option>";
                    j++;
                }
                return content;
            }
/*Age=========================================================*/
            /*創造Age直線圖*/
            function CreateAgeChart(ChartNum, StartYear, EndYear, AgeInterval)
            {
                $.ajax({
                    url: "Handler/PeopleAnalysis.ashx"
                    , type: "post"
                    , data: "type=3&start=" + StartYear + "&end=" + EndYear
                    , success: function (data) {
                        var Data = ConversionAgeChartData(data, new Date().getFullYear(), AgeInterval);
                        var PeopleMax = AgeDataPeopleMax(data, new Date().getFullYear(), AgeInterval) * 1.5;
                        var PeopleMin = PeopleMax * -1;
                        categories = eval(CreateAgeCategories(AgeInterval));
                $('#container' + ChartNum).highcharts({
                    chart: {
                        type: 'bar'
                    },
                    title: {
                        text: StartYear +"-"+EndYear+'會員年齡分佈圖表'
                    },
                    subtitle: {
                        text: '直線圖'
                    },
                    xAxis: [{
                        categories: categories,
                        reversed: false,
                        labels: {
                            step: 1
                        }
                    }, { // mirror axis on right side
                        opposite: true,
                        reversed: false,
                        categories: categories,
                        linkedTo: 0,
                        labels: {
                            step: 1
                        }
                    }],
                    yAxis: {
                        title: {
                            text: null
                        },
                        labels: {
                            formatter: function () {
                                return Math.abs(this.value) ;
                            }
                        },
                        min: PeopleMin,
                        max: PeopleMax
                    },
                    plotOptions: {
                        series: {
                            stacking: 'normal'
                        }
                    },
                    tooltip: {
                        formatter: function () {
                            return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
                                '人數: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
                        }
                    },
                    series: eval(Data)
                });
                    }
                });
            }
            /*資料轉換成AgeChart資料格式*/
            function  ConversionAgeChartData(data, year, AgeInterval)
            {
                Timenum1 = 0;
                Timenum2 = 0;
                FemaleNum = 0;
                MaleNum = 0;
                FIntervalyear = year - AgeInterval;
                MIntervalyear = year - AgeInterval;
                Content = "";
                MaleContent = "{name: 'Male',data: [";
                FemaleContent="{name: 'Female',data: [";
                $.each(data, function (name, value) {
                    $.each(value, function () {
                        if (this.sex == "F") {/*判別資料性別*/
                            if (FIntervalyear < this.year) {/*範圍內所有人數相加*/
                                FemaleNum = FemaleNum + this.PeopleNum;
                            }
                            else {
                                Timenum1++;
                                FIntervalyear = FIntervalyear - AgeInterval;/*移動範圍*/
                                if (Timenum1 == 1) {/*判別第一筆*/
                                    FemaleContent += FemaleNum;
                                }
                                else {
                                    FemaleContent += "," + FemaleNum;/*存入此範圍人數*/
                                }
                                while (FIntervalyear > this.year) {/*避免某範圍無資料*/
                                    FemaleContent += ",0";
                                    FIntervalyear = FIntervalyear - AgeInterval;
                                }
                                FemaleNum = this.PeopleNum;
                            }
                        }
                        else {
                            if (MIntervalyear < this.year) {
                                MaleNum = MaleNum + this.PeopleNum;
                            }
                            else {
                                Timenum2++;
                                MIntervalyear = MIntervalyear - AgeInterval;
                                if (Timenum2 == 1) {
                                    MaleContent += MaleNum * -1;
                                }
                                else {
                                    MaleContent += "," + (MaleNum * -1);
                                }
                                while (MIntervalyear > this.year) {
                                    MaleContent += ",0";
                                    MIntervalyear = MIntervalyear - AgeInterval;
                                }
                                MaleNum = this.PeopleNum;
                            }
                        }
                    });
                });

                if (FemaleNum == 0)
                { FemaleContent += "0"; }
                if (MaleNum == 0)
                { MaleContent += "0"; }
                if (Timenum2 == 0) {
                    MaleContent += (-1 * MaleNum) + "]}";
                }
                else {
                    MaleContent += "," + (-1 * MaleNum) + "]}";
                }
                if (Timenum1 == 0) {
                    FemaleContent += FemaleNum + "]}";
                }
                else {
                    FemaleContent += "," + FemaleNum + "]}";
                }
                Content += "[" + MaleContent + "," + FemaleContent + "]";
                return Content;
            }
            /*計算Age圖寬*/
            function AgeDataPeopleMax(data, year, AgeInterval)
            {
                Maxnum = 0;
                FemaleNum = 0;
                MaleNum = 0;
                FIntervalyear = year - AgeInterval;
                MIntervalyear = year - AgeInterval;
                $.each(data, function (name, value) {
                    $.each(value, function () {
                        if (this.sex == "F") {
                            if (FIntervalyear < this.year) {
                                FemaleNum = FemaleNum + this.PeopleNum;/*某範圍人數超過最多人數就取代最多人數*/
                                if (this.PeopleNum > Maxnum) { Maxnum = this.PeopleNum; }
                            }
                            else {
                                if (FemaleNum > Maxnum) { Maxnum = FemaleNum; }
                                Timenum1++;
                                FIntervalyear = FIntervalyear - AgeInterval;
                                FemaleNum = this.PeopleNum;
                            }
                        }
                        else {
                            if (MIntervalyear < this.year) {
                                MaleNum = MaleNum + this.PeopleNum;
                                if (this.PeopleNum > Maxnum) { Maxnum = this.PeopleNum; }
                            }
                            else {
                                if (MaleNum > Maxnum) { Maxnum = MaleNum; }
                                MIntervalyear = MIntervalyear - AgeInterval;
                                MaleNum = this.PeopleNum;
                            }
                        }
                    });
                });
                return Maxnum;
            }
            /*計算Age,Y軸值*/
            function CreateAgeCategories(AgeInterval)
            {
                content = "";
                content += "[";
                num1 = 0;
                num2 = AgeInterval - 1;
                num3 = parseInt(num2) + parseInt(AgeInterval);
                content += "'" + num1 + "-" + num2 + "'";
                while (num3 <= 110)
                {
                    num1 = num1 + parseInt(AgeInterval);
                    num2 = num2 + parseInt(AgeInterval);
                    num3 = parseInt(num2) + parseInt(AgeInterval);
                    content += ",'" + num1 + "-" + num2 + "'";
                }
                content += "]";
                return content;
            }
/*Register=========================================================*/
            /*資料轉換成RegisterChart資料格式*/
            function ConversionRegisterChartData(data, StartYear, EndYear) {
                content = "";
                content += "[";
                year = "";
                monthnum = 1;
                $.each(data, function (name, value) {
                    $.each(value, function () {
                        /*------------*/
                        // alert(content + "," + year + "," + this.year + "," + monthnum + "," + this.month)
                        if (year == "") {
                            /*防止某前幾年無資料*/
                            if (StartYear != this.year) {
                                for (var i = StartYear; i < this.year; i++) {
                                    content += "{name:[" + i + "],data:[0,0,0,0,0,0,0,0,0,0,0,0]},";
                                }
                            }
                            year = this.year;
                            content += "{";
                            content += "name:[" + year + "],";
                            content += "data:[";
                            if (monthnum == this.month) {
                                content += this.PeopleNum;
                            }
                            else {
                                content += "0";
                                for (var i = 2; i < this.month; i++) {
                                    content += ",0";
                                }
                                content += "," + this.PeopleNum;
                            }
                        }
                        else {
                            if ((this.year == year) && (monthnum == this.month)) {
                                content += "," + this.PeopleNum;
                            }
                            else if ((this.year == year) && (monthnum != this.month)) {
                                /*同年不同月*/
                                /*補足月*/
                                for (var i = monthnum; i < this.month; i++) {
                                    content += ",0";
                                }
                                content += "," + this.PeopleNum;
                            }
                            else {
                                if (year + 1 == this.year) {
                                    for (var i = monthnum; i < 12; i++) {
                                        content += ",0";
                                    }
                                    content += "]},";
                                    content += "{";
                                    content += "name:[" + this.year + "],";
                                    content += "data:[";
                                    monthnum = 1;
                                    if (this.month == 1) {
                                        content += this.PeopleNum;
                                    }
                                    else {
                                        for (var i = monthnum; i < this.month; i++) {
                                            if (i == 1) {
                                                content += "0";
                                            }
                                            else {

                                                content += ",0";
                                            }
                                        }
                                        content += "," + this.PeopleNum;
                                    }
                                    /*差一年*/
                                    /*補月足一年*/
                                }
                                else {
                                    for (var i = monthnum; i < 12; i++) {
                                        content += ",0";
                                    }
                                    year = year + 1;
                                    content += "]},";
                                    for (var i = year; i < this.year; i++) {
                                        content += "{name:[" + i + "],data:[0,0,0,0,0,0,0,0,0,0,0,0]},";
                                    }
                                    content += "{";
                                    content += "name:[" + this.year + "],";
                                    content += "data:[";
                                    monthnum = 1;
                                    for (var i = monthnum; i < this.month; i++) {
                                        if (i == 1) {
                                            content += "0";
                                        }
                                        else {

                                            content += ",0";
                                        }
                                    }
                                    content += "," + this.PeopleNum;
                                    /*差多年*/
                                    /*補多年補月*/
                                }
                            }
                        }
                        year = this.year
                        monthnum = this.month + 1;
                    });
                });
                content += "]}";
                /*防止某後幾年無資料*/
                if (EndYear != year) {
                    for (var i = year + 1; i <= EndYear; i++) {
                        content += ",{name:[" + i + "],data:[0,0,0,0,0,0,0,0,0,0,0,0]}";
                    }
                }
                content += "]";
                return content;
            }
            /*創造Register長條圖*/
            function CreateRegisterChart(ChartNum, StartYear, EndYear) {
                $.ajax({
                    url: "Handler/PeopleAnalysis.ashx"
                    , type: "post"
                    , data: "type=1&start=" + StartYear + "&end=" + EndYear
                    , success: function (data) {
                        var Data = ConversionRegisterChartData(data, StartYear, EndYear);
                        $('#container' + ChartNum).highcharts({
                            chart: { type: 'column' },
                            title: { text: StartYear + '-' + EndYear + '年每月註冊人數統計圖表' },
                            subtitle: { text: '長條圖' },
                            xAxis: {
                                categories: ['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月']
                            },
                            yAxis: { min: 0, title: { text: '人數' } },
                            tooltip: {
                                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                                    '<td style="padding:0"><b>{point.y:.1f} 人</b></td></tr>',
                                footerFormat: '</table>',
                                shared: true,
                                useHTML: true
                            },
                            plotOptions: { column: { pointPadding: 0.2, borderWidth: 0 } },
                            series: eval(Data)
                        });
                    }
                });
            }
            /*創造Register折線圖*/
            function CreateRegisterChart2(ChartNum, StartYear, EndYear) {
                /*  var chart = $('#container2').highcharts();加點方法
  chart.addSeries(
          {
              name: 'test',
              data: [100, 100, 100]
          });*/
                $.ajax({
                    url: "Handler/PeopleAnalysis.ashx"
                    , type: "post"
                    , data: "type=1&start=" + StartYear + "&end=" + EndYear
                    , success: function (data) {

                        var Data = ConversionRegisterChartData(data, StartYear, EndYear);
                        $('#container' + ChartNum).highcharts({
                            chart: { type: 'line' },
                            title: { text: StartYear + '-' + EndYear + '年每月註冊人數統計圖表' },
                            subtitle: { text: '折線圖' },
                            xAxis: {
                                categories: ['01月', '02月', '03月', '04月', '05月', '06月'
                                , '07月', '08月', '09月', '10月', '11月', '12月']
                            },
                            yAxis: { title: { text: '人數' } },
                            plotOptions: { line: { dataLabels: { enabled: true }, enableMouseTracking: false } },
                            series: eval(Data)
                        });
                    }
                });
            }

     </script>

</asp:Content>

